<template>
  <div>
    <div class="addbut"></div>
    <div class="queryDiv">
      <el-input class="queryInput" v-model="queryForm.name" placeholder="类型"></el-input>
      <el-button @click="loadGrid()" type="primary" class="search">搜索</el-button>
      <el-button @click="openAdd(null,'add',true)" type="primary"><i class="el-icon-plus"></i> 添加品牌 </el-button>
    </div>
    <div v-loading="loading.table">
      <el-table :data="brandList"  style="width: 100%;font-size:12px" border highlight-current-row>
        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        <el-table-column prop="name" label="品牌名称" align="center"></el-table-column>
        <el-table-column prop="isHotStr" label="是否热门" align="center"></el-table-column>
        <el-table-column  label="操作" min-width="200" align="center">
          <template slot-scope="scope">
            <i class="el-icon-edit el-icon--right"></i>
            <el-button type="text" @click="openAdd(scope.row,'edit',true)">修改</el-button>
            <i class="el-icon-delete el-icon--right"></i>
            <el-button type="text" @click="deleteBrand(scope.row,1)">删除</el-button>
              <i class="el-icon-more-outline el-icon--right"></i>
              <el-button type="text" @click="openChildren(scope.row)">子品牌</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="paginationChangeFn" background layout="prev, pager, next" :page-count="pagination.pageCount"> </el-pagination>
    </div>


    <!--添加品牌-->
    <el-dialog :title="addOrUpdate" :visible.sync="brandForm.dialog">

      <el-form ref="brandForm" :model="brandForm"   label-width="80px" style="margin:20px;" v-loading="brandForm.loading">
        <el-row>
          <el-col :span="12">
            <el-form-item label="品牌名称:">
              <el-input  v-model="brandForm.name"  placeholder="请输入品牌名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">

            <el-form-item label="英文:">
              <el-input  v-model="brandForm.enName"  placeholder="请输入英文"></el-input>
            </el-form-item>

          </el-col>

        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="是否热门:">
              <el-radio v-model="brandForm.isHot" label="0" border>否</el-radio>
              <el-radio v-model="brandForm.isHot" label="1" border>是</el-radio>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="排序:" >
              <el-input  v-model="brandForm.sort"  type="number" placeholder="请输入排序"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="text-align: center">
          <el-button type="primary" @click="saveBrand()">保存</el-button>
          <el-button type="primary" @click="brandForm.dialog=false">关闭</el-button>
        </el-row>

      </el-form>
    </el-dialog>

    <el-dialog :title="addOrUpdate" :visible.sync="childrenForm.dialog" v-loading="childrenForm.loading">
        <div class="queryDiv">
            <el-button @click="openAdd(null,'add',false)" type="primary"><i class="el-icon-plus"></i> 添加品牌 </el-button>
        </div>
      <el-table :data="childrenForm.brandList"  style="width: 100%;font-size:12px" border highlight-current-row>
        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        <el-table-column prop="name" label="品牌名称" align="center"></el-table-column>
        <el-table-column prop="isHotStr" label="是否热门" align="center"></el-table-column>
        <el-table-column  label="操作" min-width="200" align="center">
          <template slot-scope="scope">
            <i class="el-icon-edit el-icon--right"></i>
            <el-button type="text" @click="openAdd(scope.row,'edit',false)">修改</el-button>
            <i class="el-icon-delete el-icon--right"></i>
            <el-button type="text" @click="deleteBrand(scope.row,2)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="paginationChangeFn2" background layout="prev, pager, next" :page-count="pagination2.pageCount"> </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
    export default {
        name:'TruckBrandList',
        data() {
            return {
                addOrUpdate:'新增品牌',
                parentId:0,
                parentIdForChild:0,
                forParent:true,
                isParent:0,
                brandList:[],
                queryForm:{
                    name:''
                },
                brandForm:{
                    dialog:false,
                    name:'',
                    enName:'',
                    sort:0,
                    isHot:"0",
                    brandId:0,
                    loading:false
                },
                childrenForm:{
                    dialog:false,
                    brandList:[],
                    loading:false
                },
                loading: {table: false},
                pagination: {currentPage: 1, pageCount: 0 },
                pagination2: {currentPage: 1, pageCount: 0 }
            };
        },
        methods: {
            paginationChangeFn(currentPage) {
                this.pagination.currentPage = currentPage;
                this.loadGrid();
            },
            paginationChangeFn2(currentPage){
                this.pagination2.currentPage = currentPage;
                this.loadGrid2();
            },
            loadGrid() {
                this.loading.table=true;
                let params  = {
                    currentPage: this.pagination.currentPage,
                    brandName:this.queryForm.name
                };
                this.$api.listTruckBrand(params).then(response=>{
                    this.loading.table = false;
                    let result = response.data;
                    let data = result.data;
                    if(result.code==0){
                        this.brandList = data.list;
                    }
                    this.pagination.pageCount = result.data.totalPage;
                });
            },
            loadGrid2() {
                let params  = {
                    currentPage: this.pagination2.currentPage,
                    parentId:this.parentIdForChild
                };
                this.$api.listChildren(params).then(response=>{
                    let result = response.data;
                    let data = result.data;
                    if(result.code==0){
                        this.childrenForm.brandList=data.list;
                    }
                    this.pagination2.pageCount = result.data.totalPage;
                });
            },
            saveBrand(){
                let params = this.brandForm;

                if(!this.forParent){
                    this.parentId = this.parentIdForChild;
                }else{
                    this.parentId = 0;
                }

                params.parentId = this.parentId;
                if(this.parentId===0){
                    this.isParent = 1;
                }
                params.isParent = this.isParent;
                this.$api.saveBrand(params).then(response=>{
                    let result = response.data;
                    if(result.code==0){
                        this.$message.success("保存成功!");
                        this.brandForm.dialog=false;
                        //如果是加父级的品牌
                        if(this.isParent==1){
                            this.loadGrid();
                        }else{
                            this.loadGrid2();
                        }

                    }else{
                        this.$message.error(result.msg);
                    }
                });
            },
            deleteBrand(row,type){
                this.$confirm('此操作将删除品牌,请确认是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading.table=true;
                    let params = {'brandId':row.brandId};
                    this.$api.deleteBrand(params).then(response=>{
                        let result = response.data;
                        if(result.code==0){
                            this.$message({ type: 'success', message: '删除成功!'});
                            if(type==1){
                                this.loadGrid();
                            }else{
                                this.loadGrid2();
                            }
                        }else{
                            this.$message.error(result.msg);
                        }
                        this.loading.table=false;
                    });
                });
            },
            openChildren(row){
                this.parentIdForChild = row.brandId;
                this.isParent = 0;
                this.childrenForm.dialog=true;
                this.loadGrid2();
            },
            openAdd(row,type,forParent){
                //先清除
                this.brandForm.name = '';
                this.brandForm.sort = 0;
                this.brandForm.isHot = '0';
                this.brandForm.brandId=0;
                this.brandForm.enName = '';
                this.brandForm.brandId = 0;
                this.forParent = forParent;
                if(type=='add'){
                    this.addOrUpdate  = '新增品牌';
                    //打开父级品牌parentId
                    this.brandForm.dialog=true;
                }else{
                    this.addOrUpdate  = '编辑品牌';
                    this.brandForm.dialog=true;
                    let params = {brandId:row.brandId};
                    this.$api.getBrandInfo(params).then(response=>{
                        let result = response.data;
                        let d = result.data;
                        if(result.code==0){
                            this.brandForm.name = d.brandName;
                            this.brandForm.sort = d.sort;
                            this.brandForm.isHot = d.isHot.toString();
                            this.brandForm.brandId=row.brandId;
                            this.brandForm.enName = d.enName;
                            this.parentId = d.parentId;
                        }else{
                            this.$message.error(result.msg);
                        }
                    });

                }
            },
            openChildrenForm(){
                //打开子级品牌添加框  parentId
                this.brandForm.dialog=true;
            }
         },
        created() {
            this.loadGrid();
        }
    };
</script>

<style lang="less" scoped>
  .addbut{
    margin-bottom:20px;
  }
  #statusSwitch {
    display: block;
  }
  .el-icon--right{
    color:#4db3ff;
    margin-left:15px
  }
  .queryDiv {
    margin-bottom: 20px;
    .queryInput {
      width:200px;
      margin-right:20px
    }
    .search{
      margin-left:20px
    }
    .btn-add{
      margin-left: 150px;
    }
  }
  .imgsrc{
    margin-left:20px;
    margin-top:10px;
  }
  .el-table .cell {
    white-space: pre-line;
  }

</style>
